window.addEventListener('load', function () { 
    // 1、鼠标经过箭头显示，鼠标离开箭头隐藏
    var focus = document.querySelector('.focus');
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var ul = focus.querySelector('.focus ul');
    var ol = focus.querySelector('.focus ol');
    var lis = ul.children;
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function () { 
        arrow_l.style.display  = 'block'
        arrow_r.style.display = 'block'
        clearInterval(timer)
    })
    focus.addEventListener('mouseleave', function () { 
        arrow_l.style.display  = 'none'
        arrow_r.style.display = 'none'
        timer = setInterval(function () { 
            arrow_r.click();
        },2000)
    })
    // 2、动态显示小圆点
    for (var i = 0; i < ul.children.length; i++) { 
        var li = document.createElement('li');
        // 设置属性得到点击的当前的小li是哪一个
        li.setAttribute('index', i);
        ol.appendChild(li);
        // 3、点击小圆点会变色并且跳转到对应的页面
        li.addEventListener('click', function () { 
            for (var i = 0; i < ol.children.length; i++) { 
                ol.children[i].className = ''
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            index = num = circle;
            animate(ul,-index * focusWidth)
        })
    }
    ol.children[0].className = 'current';
    // 点击右箭头可以播放下一张图片
    var num = 0
    var circle = 0
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    arrow_r.addEventListener('click', function () { 
    // 克隆一张图片 放到最后
        if (num == ul.children.length-1) { 
            ul.style.left = 0;
            num = 0;
        }
        num++
        animate(ul, -num * focusWidth);
        circle++;
        for (var i = 0; i < ol.children.length; i++) { 
            ol.children[i].className = ''
        }
        if (circle == ol.children.length) { 
            circle = 0;
        }
        ol.children[circle].className = 'current';
    })
    arrow_l.addEventListener('click', function () { 
        // 克隆一张图片 放到最后
            if (num == 0) { 
                ul.style.left = -focusWidth * (ul.children.length - 1) + 'px';
                num = ul.children.length - 1;
        }
        num--;

        animate(ul, -num * focusWidth);
        
        
        circle--;
        
            if (circle < 0) { 
                circle = ol.children.length-1;
        }
        for (var i = 0; i < ol.children.length; i++) { 
            ol.children[i].className = ''
    }
            ol.children[circle].className = 'current';
    })
    var timer = setInterval(function () { 
        arrow_r.click();
    },2000)
})